<template>
  <view class="page">
    <swiper class="swiper" circular :current="current" @change="handleChange">
      <swiper-item v-for="(i, k) in dataList" :key="k">
        <view
          class="swiper-card"
          :style="{
            backgroundImage: `url(${i.cover_img})`,
          }"
        >
          <view class="l-row">{{ i.name }}</view>
          <view class="t-row">
            有效期 {{ memberId ? getLimit(i.day_num) : `${i.day_num}天` }}
          </view>
        </view>
        <u-parse :content="i.rule" />
      </swiper-item>
    </swiper>
    <!-- <view class="btn" v-if="dataList.length > 0 && !memberId">
      <view class="price">
        <u-text
          mode="price"
          :text="curPlus.price"
          size="20"
          align="left"
          color="#3BA199"
          bold
        />
      </view>
      <view class="button" @click="handleBuy()"> 立即支付</view>
    </view> -->
  </view>
</template>

<script>
import { myMemberCard, myMemberPay } from "@/request/myApi.js";
export default {
  data() {
    return {
      memberId: null, // 会员ID
      current: 0, // 当前会员下标
      dataList: [], // 会员列表
      curPlus: {}, // 当前会员
    };
  },
  onLoad(e) {
    this.memberId = e.id;
    this.getDataList(e.id);
  },
  computed: {
    userInfo() {
      return this.$getStorage("USER_INFO");
    },
  },
  methods: {
    // 获取会员卡列表
    getDataList() {
      myMemberCard().then((res) => {
        if (res.code == 1) {
          res.data.forEach((i, index) => {
            i.cover_img = i.cover_img || this.webSrc("/assets/web_img/my/member1.png");
            if (i.id == this.memberId) this.current = index;
          });
          this.dataList = this.memberId
            ? res.data.filter((i) => i.id == this.memberId)
            : res.data;
          this.curPlus = this.dataList[this.current];
        }
      });
    },
    // 获取有效期
    getLimit(day) {
      let now = Number(new Date());
      if (this.userInfo?.isPlus) {
        now = this.userInfo.member_expire_time * 1000;
      }
      let once = 60 * 60 * 24 * 1000;
      let start = this.$TimeFormat(now);
      let end = this.$TimeFormat(now + once * day);
      return this.userInfo.member_expire_time == -1 ? '永久' : `${start}-${end}`;
    },
    // 切换会员
    handleChange(e) {
      this.current = e.target.current;
      uni.pageScrollTo(); // 滚动到顶部
      this.curPlus = this.dataList[this.current];
    },
    // 购买会员
    handleBuy() {
      uni.login({
        success: (e) => {
          myMemberPay({
            code: e.code,
            lvl_id: this.curPlus.id,
          }).then((res) => {
            if (res.code == 1) {
              uni.requestPayment({
                appId: res.data.appId,
                nonceStr: res.data.nonceStr,
                package: res.data.package,
                paySign: res.data.paySign,
                signType: res.data.signType,
                timeStamp: res.data.timeStamp,
                success: () => {
                  uni.showToast({
                    title: "支付成功",
                    icon: "success",
                    mask: true,
                  });
                },
              });
            }
          });
        },
        fail: (e) => {
          uni.showModal({
            content: "获取微信code失败",
            showCancel: false,
          });
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 20rpx 20rpx 200rpx 20rpx;
  word-break: break-all;
  .swiper {
    height: 100vh; // calc(100vh - 220rpx);
    .swiper-card {
      height: 330rpx;
      width: 100%;
      background-size: 100% 100%;
      margin-bottom: 20rpx;
      position: relative;
      border-radius: 20rpx;
      .l-row {
        font-family: "FZLanTingHeiS-B-GB";
        position: absolute;
        left: 62rpx;
        font-weight: 600;
        bottom: 80rpx;
        color: #7d7f8c;
      }
      .t-row {
        position: absolute;
        left: 62rpx;
        bottom: 20rpx;
        font-family: "PingFang HK";
        font-size: 20rpx;
        line-height: 28rpx;
        color: #b1b0b8;
      }
    }
  }
  .btn {
    position: fixed;
    background-color: #fff;
    box-shadow: 0 0 10rpx rgba(228, 228, 228, 0.5);
    height: 106rpx;
    padding: 40rpx;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    .price {
      flex: 1;
      padding: 32rpx 0;
      display: flex;
      justify-content: center;
    }
    .button {
      flex: 1;
      height: 88rpx;
      text-align: center;
      line-height: 88rpx;
      color: $active-color;
      font-size: 28rpx;
      background-color: #cee7e5;
      border-radius: 100rpx;
      &:active {
        background-color: #b9e4e1;
      }
    }
  }
}
</style>
